const path = require('path');
const webpack = require('webpack');
const resolvePath = (pathstr) => path.resolve(__dirname, pathstr);
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  // entry: resolvePath('../src/client/app/index.js'),//入口文件
  entry: {
    main:['react-hot-loader/patch',resolvePath('../src/client/app/index.js')] //入口文件
  },
  output: {
    filename: '[name].js',
    path: resolvePath('../dist/static'),
    publicPath: 'http://localhost:9002/'
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
        },
        {loader:'css-loader'},
        {
          loader: "postcss-loader"
        },
        {
          loader: "sass-loader"
        }
      ]
    }]
  },
  plugins: [
    new webpack.DefinePlugin({
      '__SERVER__': false
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css' //设置名称
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        libs: { // 抽离第三方库
          test: /node_modules/, // 指定是node_modules下的第三方包
          chunks: 'initial',
          name: 'libs'// 打包后的文件名，任意命名
        }
      }
    }
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  }
};
